<template>
    <div class="wrapper">
        <v-head></v-head>
        <v-menu :items="menus"></v-menu>
        <!-- <v-sidebar></v-sidebar> -->
        <div class="content-box" :class="{'content-collapse':collapse}">
            <v-tags></v-tags>
            <div class="content">
                <transition name="move" mode="out-in">
                    <!-- <keep-alive>
                        <router-view></router-view>
                    </keep-alive> -->
                    <router-view/>
                </transition>
            </div>
        </div>
    </div>
</template>

<script>
    import vHead from './Header';
    import vMenu from './Menu';
    import vTags from './Tags.vue';
    import bus from './bus';
    const defaultUrl = "./data/";
    export default {
        data(){
            return {
                url: './vuetable.json',
                collapse: false,
                menus: [],
            }
        },
        methods: {
            initMenu () {
                this.$axios.get("/sys-menu.json").then((res) => {
                    this.menus = res.data.list;
                })
            }
        },
        components:{
            vHead, vMenu, vTags
        },
        mounted() {
            this.initMenu();
        },
        created(){
            bus.$on('collapse', msg => {
                this.collapse = msg;
            })
        }
    }
</script>
